<div xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html">
    <div class="ui-widget ui-widget-header">
        Compute the volume of a cylinder
    </div>
    <h:form id='select-form'>
        <dl>
            <dt><label for='height'>Height</label> <h:message for='height'/></dt>
            <dd>
                <h:selectOneMenu id='height' size='10' value='#{compute.height}'
                                 styleClass="ui-state-default ui-corner-all">
                    <f:selectItem itemLabel="1 inch" itemValue="25.4"/>
                    <f:selectItem itemLabel="1 feet" itemValue="304.8"/>
                    <f:selectItem itemLabel="1 yard" itemValue="914.4"/>
                    <f:converter converterId="float" />
                </h:selectOneMenu>
            </dd>
            <dt><label for='radius'>Radius</label> <h:message for='radius'/></dt>
            <dd>
                <h:selectOneMenu id='radius' size='10' value='#{compute.radius}'
                                 styleClass="ui-state-default ui-corner-all">
                    <f:selectItem itemLabel="1 inch" itemValue="25.4"/>
                    <f:selectItem itemLabel="1 feet" itemValue="304.8"/>
                    <f:selectItem itemLabel="1 yard" itemValue="914.4"/>
                    <f:converter converterId="float"/>
                </h:selectOneMenu>
            </dd>
        </dl>
        <ul class='buttons'>
            <li>
                <h:commandButton id='run' value='Compute' action="#{compute.run}"
                                 styleClass="ui-button ui-state-default ui-corner-all"/>
            </li>
        </ul>
    </h:form>
</div>